<template>
  <transition name="search-box">
    <div
      v-if="isSearchBoxShow"
      class="search-box-container"
      :style="{
        backgroundColor: themeStyle[theme].backgroundColor1,
        color: themeStyle[theme].textColor2
      }"
    >
      <div class="search-box-left">
        <div
          class="search-box-left-icon"
          :style="{
            backgroundColor: themeStyle[theme].backgroundColor2
          }"
        >
          <SearchOutlined />
        </div>
        <div class="search-input">
          <input
            ref="searchInputRef"
            v-model="searchContent"
            type="text"
            placeholder="搜索"
            @keydown.enter="canvasSearchStore.searchContentChange"
          />
        </div>
        <div class="search-vague" @click="isMatchAll = !isMatchAll">
          <FontColorsOutlined :style="{ color: isMatchAll ? '#0087dc' : undefined }" />
        </div>
      </div>
      <div class="search-box-right">
        <div class="search-result">
          <span>{{
            (searchResult.length === 0 ? 0 : currentSearchIndex + 1) + ' / ' + searchResult.length
          }}</span>
        </div>
        <div class="search-tb">
          <div class="search-tb-icon" @click="canvasSearchStore.changeSearchIndex('prev')">
            <ArrowUpOutlined />
          </div>
          <div class="search-tb-icon" @click="canvasSearchStore.changeSearchIndex('next')">
            <ArrowDownOutlined />
          </div>
        </div>
        <div class="search-close" @click="canvasSearchStore.switchSearchBox">
          <svg-icon name="funClose" size="0.8em"></svg-icon>
        </div>
      </div>
    </div>
  </transition>
</template>

<script setup lang="ts">
import { useStyleStore } from '@renderer/store/globalStyle/style'
import { storeToRefs } from 'pinia'
import {
  SearchOutlined,
  ArrowUpOutlined,
  ArrowDownOutlined,
  FontColorsOutlined
} from '@ant-design/icons-vue'
import { useCanvasSearchStore } from '@renderer/store/canvas/canvasSearch'
import { ref, watch } from 'vue'

const canvasSearchStore = useCanvasSearchStore()
const { isSearchBoxShow, searchContent, isMatchAll, currentSearchIndex, searchResult } =
  storeToRefs(canvasSearchStore)

const styleStore = useStyleStore()
const { theme, themeStyle } = storeToRefs(styleStore)

const searchInputRef = ref<any>()
watch(
  () => isSearchBoxShow.value,
  (val) => {
    if (val) {
      setTimeout(() => {
        searchInputRef.value?.focus()
      }, 300)
    }
  }
)
</script>

<style scoped lang="scss">
.search-box-container {
  width: 100%;
  height: 100%;
  box-shadow: 0px 0px 10px #0000001a;
  font-size: $font-size-small;
  display: flex;
  justify-content: space-between;
  align-items: center;

  .search-box-left {
    height: 100%;
    display: flex;
    justify-content: left;
    align-items: center;
    .search-box-left-icon {
      width: 24px;
      height: 100%;
      display: flex;
      justify-content: center;
      align-items: center;
    }
    .search-input {
      width: 150px;
      input {
        height: 20px;
        border: none;
        &:active {
          outline: none;
        }
        &:focus {
          outline: none;
        }
      }
    }
    .search-vague {
      cursor: pointer;
      width: 20px;
      height: 100%;
      line-height: 25px;
    }
  }

  .search-box-right {
    height: 100%;
    display: flex;
    justify-content: right;
    align-items: center;
    user-select: none;

    .search-result {
      width: 40px;
      display: flex;
      justify-content: space-around;
      align-items: center;
    }
    .search-tb {
      width: 40px;
      display: flex;
      justify-content: space-around;
      align-items: center;
      .search-tb-icon {
        cursor: pointer;
        &:hover {
          background: #0000000c;
        }
      }
    }
    .search-close {
      cursor: pointer;
      width: 24px;
      height: 100%;
      display: flex;
      justify-content: center;
      align-items: center;
      &:hover {
        background: #ff00000c;
      }
    }
  }
}
</style>

<style scoped>
.search-box-enter-active {
  animation: enter 0.3s ease-in-out;
}
@keyframes enter {
  0% {
    transform: translateX(100%);
  }

  100% {
    transform: translateX(0);
  }
}

.search-box-leave-active {
  animation: leave 0.3s ease-in-out;
}
@keyframes leave {
  0% {
    transform: translateX(0);
  }

  100% {
    transform: translateX(100%);
  }
}
</style>
